<!--
 * @Author: zhangyun
 * @Date: 2021-04-25 13:55:40
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-25 15:15:52
 * @Desc: 
-->
<template>
  <div class="bg-white rounded-md overflow-hidden">
    <header class="h-64">
      <img src="../../assets/img-1.jpeg" class="h-full w-full" alt="" srcset="" />
    </header>
    <section class="h-24 flex items-center justify-between p-4">
      <div class="left cursor-pointer flex-1">
        <h4 class="text-xl font-black">{{ title }}</h4>
        <span class="text-gray-400 text-xs">{{ updateTime }}更新.{{ views }}浏览</span>
      </div>
      <div class="right cursor-pointer w-24">
        <button class="px-4 py-1 bg-blue-100 text-blue-600 font-black focus:outline-none">关注专题</button>
      </div>
    </section>
    <footer></footer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Items',
  props: {
    title: String,
    updateTime: String,
    views: Number,
  },
  setup() {},
})
</script>

<style></style>
